<!-- 项目动态 -->
<template>
  	<div class="main pb24 pr24">
		<div class="head pt32 pb32">
			<div class="back-title ft14">
				<div class="back pr32 align-row-center pointer" @click="$router.back(-1)">
                    <i class="icon ic_back mr8"></i>
                    <span>返回</span>
                </div>
				<div class="fc-black">{{ projectName }}>项目成员</div>
			</div>
		</div>
        <div class="add-member space-between pt24 pb24">
            <div class="pl32 align-row-center pointer" @click="is_show_selectMember = true">
                <i class="icon add_new-job mr8"></i>
                <span class="fc-gray ft14">添加成员</span>
            </div>
            <div class="zd-input pr32">
                <i class="icon ic_search weizhi"></i>
                <el-input type="input" v-model="searchName" placeholder="输入姓名开始搜索" @input="searchMember" ></el-input>
            </div>
        </div>
        <div class="table_titles pl32 pr32">
            <div class="table_title">
                <div class="table-td">姓名</div>
                <div class="table-td">部门</div>
                <div class="table-td">职务</div>
                <div class="table-td">联系电话</div>
            </div>
        </div>
		<div class="content scrollbar-y">
            <div class="list-dynamic  pl32 pr32">
                <div class="table_title" v-for="(item,index) in dataList" :key="index">
                    <div class="table-td ">
                        <div class="pr16">
                            <img v-if='item.headImage' :src="serverIp.setImgUrl(item.headImage)"/>
                          <img v-else src="../../../assets/img/ic_tx_gzq.png" alt="">
                        </div>
                        <span v-text="item.userName"></span>
                    </div>
                    <div class="table-td" v-text="item.departmentName"></div>
                    <div class="table-td" v-text="item.position"></div>
                    <div class="table-td" v-text="item.phone"></div>
                </div>
            </div>
		</div>
        <transition name="fade">
            <div class="main-popup"  v-if="is_show_selectMember">
                <select-member @close="closeModal" :title="'添加成员'" @callback="selectMemberCallback" :indexClose="'is_show_selectMember'"/>
            </div>
        </transition>
  	</div>

</template>

<script>
import selectMember from '@/components/base/selectMember'; //基本信息詳情
export default {
    components: {
        selectMember
    },
	data () {
		return {
            projectId:'',
            projectName:'',
            is_show_selectMember:false,
            timerIndex:'',
            searchName:'',
            dataList:[],
		};
	},
	computed: {},
	created(){
        this.projectId = this.$route.query.projectId;
        this.projectName = this.$route.query.projectName;
    },
	mounted(){
        this.getMemberList();
    },
	methods: {
        closeModal(res){
            this[res] = false;
        },
        selectMemberCallback(res,indexClose){
            console.log(res,"---");
            this.closeModal(indexClose);
            if(!!res != true)return;
            let json = {
                projectId:this.projectId,
                userId:res
            };
            this.$http.post("/project//project/user/add",json).then(res =>{
                if(res.statusCode == 200){
                    this.$message({
                        message: '添加成功成功',
                        type: 'success'
                    });
                    this.getMemberList();
                }
            }).catch(err =>{
                console.log(err)
            })
        },
        //项目成员搜索
        searchMember(){
            clearTimeout(this.timerIndex);
            this.timerIndex = setTimeout( () => {
                this.getMemberList();
            },1000)
        },
        //获取成员列表
        getMemberList(){
            this.$http.get('/project/project/user/list', {
                params: {
                    projectId: this.projectId,
                    name:this.searchName
                }
            }).then( res =>{
                if(res.statusCode == 200){
                    this.dataList = res.data || [];
                }else{
                    this.dataList = [];
                }
            }).catch(error => {
                console.log(error);
            });
        }
    }
}

</script>
<style lang='scss' scoped>
	.main{
        min-width:510px;
		height:100%;
		// overflow:hidden;
		display:flex;
		flex-direction:column;
		>.head{
			display:flex;
			justify-content:space-between;
			align-items:center;
			.back-title{
				display:flex;
				align-items:center;
				.back{
					color: #96a2aa;
				}
			}
		}
        >.add-member{
            border-radius: 6px 6px 0 0;
            background-color:#FFF;
            .zd-input{
                position: relative;
                .weizhi{
                    position:absolute;
                    right:44px;
                    top:11px;
                    z-index:999;
                }
            }
        }
        .table_titles{
            background-color:#FFF;
            .table_title{
                display:flex;
                height: 49px;
                background-color: #f2f6f9;
                border-radius: 6px;
                font-size:14px;
                color: #96a2aa;
                .table-td{
                    width:25%;
                    text-align: center;
                    line-height: 49px;
                }
            }
        }

		>.content{
            border-radius: 0 0 6px 6px ;
            background-color:#FFF;
            // flex:1;
            height:calc(100% - 120px);
			display:flex;
            flex-wrap:wrap;
            >.list-dynamic{
                width:100%;
                height:100%;
                // display:flex;
                // flex-wrap:wrap;
                // align-content:flex-start;
                // justify-content: center;
                overflow-y:auto;
                &::-webkit-scrollbar {
                    display: none
                }
                -ms-overflow-style: none; /* IE 10+ */
                scrollbar-width: none; /* Firefox */
                >.table_title{
                    display:flex;
                    height: 60px;
                    font-size:14px;
                    color: #96a2aa;
                    border-bottom:1px solid #eeeeee;
                    .table-td{
                        width:25%;
                        text-align: center;
                        display:flex;
                        justify-content:center;
                        align-items:center;
                        img{
                            width:32px;
                            height:32px;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
        .add_new-job{
            width: 12px;
            height: 12px;
            background-image: url("~@/assets/img/project/add_new-job.png");
        }
        .ic_search{
            width: 18px;
            height: 18px;
            background-image: url("~@/assets/img/project/info/ic_search.png");
        }
	}
</style>
<style lang="scss" type="text/scss">
.zd-input {
    .el-form-item__label {
        padding-right: 16px;
    }
    .el-input__inner, .el-textarea__inner {
        width: 320px;
        padding-right:40px;
        background-color: #f2f6f9;
    }
    .el-date-editor--date, .el-date-editor--time {
        .el-input__inner {
        width: 176px;
        }
    }
    .el-input__inner:focus, .el-textarea__inner:focus {
        background-color: #FFFFFF;
    }
    .line-time {
        width: 20px;
    }
}
</style>
